<template>
  <el-row v-if="total">
    <el-col>
      <el-button style="padding: 7px" size="mini" disabled>记录数: {{ total }}</el-button>
      <el-select v-model="pageSizes" size="mini" style="width: 70px;" @change="pageSizeChange">
        <el-option v-for="(item,index) in pageSizeArr" :value="item" :label="item" :key="index"></el-option>
      </el-select>
      <template v-if="totalPage>1">
        <el-button style="width: 30px;padding: 7px" icon="el-icon-arrow-left" size="mini" @click="pageChange('-')" :disabled="page==1"></el-button>
        <span @click="openPageControl"  v-if="!pageControl">{{page}}</span>
        <el-input
          v-show="pageControl"
          size="mini"
          @change="pageNumChange"
          @blur="pageNumBlur"
          style="width: 50px;"
          v-model="pageNum"></el-input>
        /
        <span>{{totalPage}}</span>
        <el-button style="width: 30px;padding: 7px" icon="el-icon-arrow-right" size="mini" @click="pageChange('+')" :disabled="page==totalPage"></el-button>
      </template>
      </el-col>
  </el-row>
</template>
<script>
  export default{
      name:'GlobalPagination',
      props: ['totalPage', 'page', 'pageSize', 'total'],
      data(){
          return{
            pageSizeArr:[10,20,50,100],
            pageSizes:10,
            pageNum:'',
            pageControl:false
          }
      },
      watch:{
        page(val){
            this.pageNum=val
        },
        totalPage(){

        },
        pageSize(val){
            this.pageSizes = val
        }
      },
      methods:{
        pageSizeChange(val){
            this.pageSizes=val
            this.$emit('pageSize', val)
        },
        pageChange(val){
            let page=this.page
            if(val=='-'){
              page--
            }else if(val=='+'){
              page++
            }else{
              page=val
            }
            this.$emit('pageChange', page)
        },
        openPageControl(){
            this.pageControl=true
            this.pageNum=this.page
        },
        pageNumChange(val){
          this.pageNum=Number(val.replace(/[^\d]/g,''))
          if(this.pageNum==this.page){
            this.pageChange(Number(this.pageNum))
          }else{
              if(Number(this.pageNum)>Number(this.totalPage)){
                this.pageNum=this.totalPage
                this.pageChange(Number(this.pageNum))
              }else if(Number(this.pageNum)<1){
                this.pageNum = 1
                this.pageChange(Number(this.pageNum))
              }else{
                this.pageNum=Number(val)
                this.pageChange(Number(val))
              }

          }
        },
        pageNumBlur(){
            this.pageControl=false
        }

      },
    mounted(){
      this.pageNum = this.page
      this.pageSizes = this.pageSize
    },

  }
</script>
<style>

</style>
